
<template>
    <div class="wrapper">
        <!-- 遍历 router 菜单数据 -->
        <remark  class="remark" :key="index" v-for="(item, index) in remarkData">
            <!-- 对于没有 children 子菜单的 item -->
            <div v-if="!item.children" class="remark-region">
                <div class="remark-operation">
                    <p class="remark-user">
                        <span>{{item.user}}</span>
                    </p>
                    <span class="remark-replay"  @click="replyRemark(item.remarkID,item.user)">回复</span>             
                </div>
                
                <div class="ql-container ql-snow">
                    <p class="remark-content ql-editor" v-html="item.remarkContent"></p>
                </div>
            </div>
            <!-- 对于有 children 子菜单的 item -->
            <template v-else>
                <div class="remark-region">
                    <div class="remark-operation">
                        <p class="remark-user">
                            <span>{{item.user}}</span>
                        </p>
                        <span class="remark-replay"  @click="replyRemark(item.remarkID,item.user)">回复</span>  
                    </div>   
                    <div class="ql-container ql-snow">
                        <p class="remark-content ql-editor" v-html="item.remarkContent"></p>
                    </div>
                </div>
                <!-- 递归操作 -->
                <remark-list class="children-remark" :remarkData="item.children"></remark-list>
            </template>
        </remark>
    </div>    
</template>     
<style scoped>
    .ql-container.ql-snow{
        border: none;
    }
    .remark{
        background: #ffffff;
        font-size: .16rem;
        border-bottom: .01rem solid #f3f3f3;
        padding: .1rem 0;
    }
    .children-remark{
        padding:0 0 0.1rem;
    }
    .children-remark .remark{
        background: #f3f3f3;
        font-size: .14rem;
        padding: 0;
    }
    .remark-region{
        padding: .1rem 0;
    }
    .remark-operation{
        display: flex;
        align-items: center;
    }
    .remark-user{
        font-size: .16rem;
        font-weight: 600;
        color: #000;
        flex: 1;
    }
    .remark-content{
        padding: 0rem;
    }
    .reply-remark-form{
        padding: .2rem;
        background: #f5f5f5;
    }
</style>
<script>
import remark from './remark'
import eventBus from '@/utils/common/eventBus'
export default {
    name:"RemarkList",
    components:{
        remark
    },
    props:['remarkData','editorOption'],
    data(){
        return{
            isReply:false
        }
    }, 
    mounted(){
        //  $(".remark-replay").click(function(){
        //      this.isReply = true;
        //      $(this).parent('.remark-operation').append($(".reply-remark-form"));
        //  })
    },
    methods:{
        replyRemark(remarkID,replyedUser){
            eventBus.$emit('emitReplyRemark',remarkID,replyedUser)
        }
    }
}
</script>